<template>
  <div style="padding: 15px">
    <div style="margin-bottom: 15px;">
      <Input style="width: 200px;" v-model="bookName" placeholder="请输入图书名称"/>
      <Input style="width: 200px;" v-model="bookISBN" placeholder="请输入ISBN"/>
      <Input style="width: 200px;" v-model="id" placeholder="请输入图书ID"/>
      <Input style="width: 200px;" v-model="categoryId" placeholder="请输入分类"/>
      <Button type="success">搜索</Button>
      <Button @click="add" type="primary" style="float: right;">添加图书</Button>
    </div>
    <Table border :columns="bookTitle" :data="bookList"></Table>
    <page-com :total="total" @page-change="pageChange"></page-com>
    <Modal v-model="addbook" :title="modalTitle" :width="1200" :mask-closable="false" @on-ok="submit" @on-cancel="cancel">
      <Form :model="addForm" :label-width="80" :rules="addFormRule">
        <Row>
          <Col span="8">
            <FormItem label="书籍名称" prop="bookName">
              <Input v-model="addForm.bookName" placeholder="请输入书籍名称" />
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="ISBN" prop="bookISBN">
              <Input v-model="addForm.bookISBN" placeholder="请输入书籍ISBN" />
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="作者"  prop="bookAuthor">
              <Input v-model="addForm.bookAuthor" placeholder="请输入详细地址" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
            <FormItem label="价格" prop="bookPrice">
              <Input v-model="addForm.bookPrice" placeholder="请输入书籍价格" />
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="分类" prop="categoryId">
              <Select v-model="addForm.categoryId" placeholder="请输选择图书分类" filterable label-in-value @on-change="storeChange">
                <Option v-for="item in storeList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="出版社"  prop="detailedAdress">
              <Select v-model="addForm.pressId" filterable label-in-value @on-change="storeChange">
                <Option v-for="item in storeList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
            <FormItem label="数量" prop="bookNumber">
              <Input v-model="addForm.bookNumber" placeholder="请输入书籍数量" />
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="所属门店">
              <Select v-model="addForm.storeId"  placeholder="请输入所属门店"  filterable label-in-value @on-change="storeChange">
                <Option v-for="item in storeList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="图书描述">
              <Input v-model="addForm.addRemark" type="textarea" :autosize="{minRows: 3,maxRows: 3}" placeholder="图书描述"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="书籍图片">
              <div class="demo-upload-list" v-for="item in uploadList">
                <template v-if="item.status === 'finished'">
                  <img :src="item.url">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                  </div>
                </template>
                <template v-else>
                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
              </div>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                accept="image/*"
                action="//120.132.2.244:8080/admin/picture/upload"
                style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
              <Modal title="查看大图" v-model="visible">
                <img :src="imgName" v-if="visible" style="width: 100%">
              </Modal>
            </FormItem>
          </Col>
        </Row>
        图书详情
        <wangeditor :catchData="catchData"></wangeditor>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import wangeditor from '_c/wangeditor/wangeditor'
  import PageCom from '_c/page'
  export default {
    name: 'bookList',
    data () {
      return {
        addbook: false,
        bookName: '',
        bookISBN: '',
        categoryId: '',
        id: '',
        number: 0,
        size: 10,
        total: 0,
        role: false,
        modalTitle: '',
        content: '',
        addForm: {
          bookContent: ''
        },
        pic: [],
        imgName: '',
        visible: false,
        uploadList: [],
        bookTitle: [
          {
            title: '图书ID',
            align: 'center',
            tooltip: true,
            key: 'id'
          },
          {
            title: '书籍名称',
            align: 'center',
            tooltip: true,
            key: 'bookName'
          },
          {
            title: 'ISBN',
            align: 'center',
            tooltip: true,
            key: 'isbn'
          },
          {
            title: '作者',
            align: 'center',
            tooltip: true,
            key: 'bookAuthor'
          },
          {
            title: '价格（元）',
            align: 'center',
            tooltip: true,
            key: 'bookPrice'
          },
          {
            title: '所属书屋',
            align: 'center',
            tooltip: true,
            key: 'storeName'
          },
          {
            title: '分类',
            align: 'center',
            tooltip: true,
            key: 'categoryName'
          },
          {
            title: '出版社',
            align: 'center',
            tooltip: true,
            key: 'pressName'
          },
          // {
          //   title: '状态',
          //   align: 'center',
          //   render: (h, params) => {
          //     const row = params.row
          //     const color = row.status === '1' ? 'primary' : row.status === '0' ? 'error' : ''
          //     const text = row.status === '1' ? '上架' : row.status === '0' ? '下架' : ''
          //     return h('Tag', {
          //       props: {
          //         type: 'dot',
          //         color: color
          //       }
          //     }, text)
          //   }
          // },
          {
            title: '操作',
            key: 'action',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '预览'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '编辑')
              ])
            }
          }
        ],
        bookList: [],
        storeList: [],
        pressList: [],
        categoryList: []
      }
    },
    mounted() {
      if (sessionStorage.getItem('role') === 'admin') {
        this.role = true
      } else {
        this.role = false
      }
      this.category()
      this.press()
      this.bookListPage()
    },
    methods: {
      category() {
        this.$get('/api/api/book/category/list').then((res) => {
          console.log(res)
        })
      },
      press() {
        this.$get('/api/api/book/press/list').then((res) => {
          console.log(res)
        })
      },
      store() {
        let url = '/api/storee'
        this.$get(url).then((res) => {
          console.log(res)
        })
      },
      bookListPage() {
        this.$post('/api/api/book/enter/page', {
          bookName: this.bookName,
          bookISBN: this.bookISBN,
          categoryId: this.categoryId,
          id: this.id,
          number: this.number,
          size: this.size
        }).then((res) => {
          if (res.code === 0) {
            this.bookList = res.data
            this.total = res.count
          }
        })
      },
      catchData(value) {
        this.content = value
      },
      title(title) {
        this.modalTitle = title
        this.addbook = true
      },
      add() {
        this.title('添加图书')
      },
      editor() {
        this.title('编辑图书')
      },
      submit() {
        if (this.modalTitle === '添加用户') {
          this.addOrg()
        } else {
          this.theEditor()
        }
      },
      addOrg() {
      },
      theEditor() {
      },
      remove(id) {
      },
      searchOrg () {
        this.userPageList()
      },
      cancel() {
        this.addForm = {}
      },
      pageChange(data) {
        this.number = data
        this.userPageList()
      },
      storeChange(e) {
        this.addForm.storeeId = e.value
        this.addForm.storeeName = e.label
      },
      handleView (url) {
        this.imgName = url
        this.visible = true
      },
      handleRemove (file) {
        const fileList = this.$refs.upload.fileList
        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
        let url = '/api/admin/picture/delete'
        let fileUrl = {
          fileUrl: file.url
        }
        this.$deletes(url, fileUrl).then((res) => {
          if (res.message) {
            this.pic.splice(this.pic.indexOf(file), 1)
            this.uploadList.splice(this.uploadList.indexOf(file), 1)
            this.$Message.success('删除成功')
          } else {
            this.$Message.error('删除失败')
          }
        })
      },
      handleSuccess (res, file) {
        file.url = file.response.data
        this.$Message.success('上传成功')
        this.pic.push(file.response.data)
        this.uploadList.push(file)
      },
      handleBeforeUpload () {
        const check = this.uploadList.length < 9
        if (!check) {
          this.$Message.error('最多上传9张图片')
        }
        return check
      }
    },
    components: {
      wangeditor,
      PageCom
    }
  }
</script>

<style scoped>
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>


